<template>
	<view class="pr">
		<view class="background w-max" style="margin-bottom: -200rpx; border-radius: 0 0 100% 100% /0 0 50rpx 50rpx;">
			<navbar :backgroundColor="{background: $background}" :scrollTop="scrollTop">
				<view class="px20 flex w-max">
					<view class="fs26 color-fff " @click="$u.route('/pages/index/chooseAddress/chooseAddress')">
						{{myAdd.name||'请选择地址'}}
					</view>
					<image src="/static/img/index/arr.png" class="h14 w14 ml10 mr20" mode=""></image>
					<u-search placeholder="点击搜索陪诊服务/医院/陪诊师" height="72" bg-color="#fff" class="flex1 "
						:show-action="false" :search-icon-color="$zs||''" disabled
						@click="$u.route('/pages/index/search/search')">
					</u-search>
				</view>
			</navbar>
			<view class="h200"></view>
		</view>
		<view class="p20">
			<u-swiper :list="data.banner||[]" @click="$advJumpList(data.banner,$event)" name="pic" />
			<scroll-view scroll-x class="nowrap">
				<view v-for="(item,index) in data.sort0" :key="index" @click="$advJump(item)"
					class="text-center mt26 dib mr20" style="min-width: 126rpx;">
					<image :src="item.icon" class="h88 w88" mode=""></image>
					<view class="color-232323 fs28">{{item.name}}</view>
				</view>
			</scroll-view>
			<view class="flex ">
				<image v-for="(item,index) in data.sort1" :key="index" @click="$advJump(item)" :src="item.cover"
					class="flex1 h164 mr20 mt24" mode=""></image>
			</view>
			<view class="mt24 bg-fff radius20" v-if="tabList.length">
				<view class="flex list radius20">
					<view class="flex h68  raduis-tab border-tab">
						<view v-for="(item,index) in tabList" :key="index" class="flex row-center px48"
							:class="current==index?'on':''" @click="current=index,screenShow = false">
							{{item.name}}
						</view>
					</view>
				</view>
				<screenList v-model="listParams" @input="getList()" :level="data.hospital_level"
					:types="data.hospital_type" :serviceList="data.sort" :type="tabList[current].type" />

				<view class="" v-for="(item,index) in tabList" :key="index">
					<hospitalList v-if="show(item)&&item.type=='yy'" :list="item.list" />
					<orgList v-if="show(item)&&item.type=='pzs'" :list="item.list" />
				</view>
			</view>
		</view>
		<z-company />
		<tabbar />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				current: 0, //当前选中导航tab 医院 陪诊师 陪诊机构

				listParams: {
					types: '', //医院类型
					service_id: '', //项目id
					price: '', //价格 '',asc=由低到高,desc=由高到低
					distance: '', //距离 '':asc=由近到远,desc=由远到近
					sale: '', //销量 '',,asc=由低到高,desc=由高到低
					age_min: 18,
					age_max: 60,
					sex: '',
					good_rate: '', //好评率：100=100%，90=90%-99%，80=80%-89%，79=80%以下
				},

				data: '',
				myAdd: this.$getCache('myAdd') || '',
				tabList1: [{
						type: 'yy',
						api: '/member/search/hospitalList',
						list: [],
						name: '医院',
						show: 'is_hospital'
					},
					{
						type: 'pzs',
						api: '/member/search/masterList',
						list: [],
						name: '陪诊师',
						show: 'is_master'
					},
				],
			};
		},
		computed: {
			tabList() {
				return this.tabList1.filter(item => this.$config[item.show] != 0)
			}
		},
		watch: {
			current(e) {
				this.getList()
			}
		},
		onLoad() {
			this.getLocation()
		},
		onShow() {
			this.$getConfig()
			this.myAdd = this.$getCache('myAdd') || ''
			if (!this.myAdd) {
				setTimeout(() => {
					this.$u.route('/pages/index/chooseAddress/chooseAddress')
				}, 10)
				return
			}
			this.getData()

		},
		onReachBottom() {
			this.getList('down')
		},
		methods: {
			show(item) {
				return this.tabList?. [this.current].type == item.type
			},
			getLocation() {
				let obj = {
					type: 'gcj02',
					success: (res) => {
						this.$setCache('location', res)
						this.getList()
					},
					fail(err) {
						this.getList()
					},
				}
				uni.getLocation(obj);
			},
			getData() {
				let params = {
					city_id: this.myAdd.id || "",
				}
				this.$request('/member/index/index', params).then(res => {
					this.data = res.data
				})
			},
			getList(e) {
				let data = this.tabList?. [this.current] || ''
				if (!data) return
				e == 'down' ? this.page++ : this.page = 1
				let location = this.$getCache('location')
				let params = {
					page: this.page,
					longitude: location.longitude || '', //	字符串	非必填	-	-	用户当前经度
					latitude: location.latitude || '', //	字符串	非必填	-	-	用户当前纬度
					city_id: this.myAdd.id || "", //	整型	必填	-	-	用户当前选择城市id
					// keyword: '', //	字符串	非必填	-	-	搜索关键词
					// hospital_type: this.hospital_type || '全部医院', //医院类型
					// service_id: this.service.id || '', //项目id
					// price: this.price.id || '', //syn=综合价格,asc=由低到高,desc=由高到低
					// distance: '', //	字符串	非必填	-	-	综合距离:asc=由近到远,desc=由远到近
					...this.listParams,
				}
				// if (!params.city_id) return this.$msg('请选择地址')
				this.$request(data.api, params).then(res => {
					let list = res.data.data
					e == 'down' ? data.list.push(...list) : data.list = list
				})
			},
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop
		},
	}
</script>

<style lang="scss">
	page {}

	.raduis-tab {
		border-radius: 20rpx 0px 30rpx 0px;
	}

	.border-tab {
		border: 1px solid #A6EAEC;
	}

	.list {
		background: linear-gradient(180deg, rgba(9, 199, 202, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
	}

	.on {
		height: 100%;
		border-radius: 20rpx 0px 30rpx 0px;
		color: #FFFFFF;
		background: linear-gradient(180deg, $zs 0%, transparentize($color: $zs, $amount: .3) 100%);
	}

	/deep/ .u-dropdown__menu__item {
		justify-content: flex-start !important;
	}

	.bottom100 {
		bottom: 230rpx;
	}
</style>
